<template>
  <div v-if="show" class="tutorial-dialog">
    <div class="dialog-content">
      <div class="tutorial-header">
        <h3>{{ currentTutorial?.name || '教程' }}</h3>
        <div class="step-progress">
          步骤 {{ currentStep + 1 }}/{{ currentTutorial?.steps.length }}
        </div>
      </div>

      <div class="tutorial-board">
        <div class="chess-board">
          <div v-for="row in 8" :key="row" class="board-row">
            <div 
              v-for="col in 8" 
              :key="col" 
              class="board-cell"
              :class="[
                getCellColor(row, col),
                {
                  'highlighted': isHighlighted(row-1, col-1),
                  'valid-move': isValidMove(row-1, col-1)
                }
              ]"
              @click="handleCellClick(row-1, col-1)"
            >
              <ChessPiece
                v-if="getPiece(row-1, col-1)"
                :piece="getPiece(row-1, col-1)"
                :mini="false"
              />
            </div>
          </div>
        </div>

        <div class="tutorial-info">
          <h4>{{ currentStepData?.title }}</h4>
          <p>{{ currentStepData?.description }}</p>
          
          <div v-if="lastMoveWasCorrect" class="feedback correct">
            做得好！
          </div>
          <div v-if="lastMoveWasWrong" class="feedback wrong">
            再试一次！
          </div>
        </div>
      </div>

      <div class="tutorial-controls">
        <button 
          v-if="!isLastStep"
          :disabled="!canProceed"
          @click="handleNextStep"
        >
          下一步
        </button>
        <button 
          v-else
          @click="handleComplete"
        >
          完成教程
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useTutorialSystem } from '../composables/useTutorialSystem'
import ChessPiece from './ChessPiece.vue'
import type { Position, TutorialStep } from '../types/chess'

const props = defineProps<{
  show: boolean
}>()

const emit = defineEmits<{
  (e: 'close'): void
  (e: 'complete'): void
}>()

const {
  currentTutorial,
  currentStep,
  startTutorial,
  checkMove,
  nextStep,
  getCurrentStep
} = useTutorialSystem()

const selectedPiece = ref<{ row: number, col: number } | null>(null)
const lastMoveWasCorrect = ref(false)
const lastMoveWasWrong = ref(false)

const isLastStep = computed(() => 
  currentStep.value === currentTutorial.value?.steps.length! - 1
)

const canProceed = computed(() => lastMoveWasCorrect.value)

const currentStepData = computed<TutorialStep | null>(() => {
  const step = getCurrentStep()
  return step as TutorialStep
})

const getPiece = (row: number, col: number) => {
  return currentStepData.value?.board[row][col] || null
}

const getCellColor = (row: number, col: number) => {
  return (row + col) % 2 === 0 ? 'white-cell' : 'black-cell'
}

const isHighlighted = (row: number, col: number) => {
  return currentStepData.value?.highlightSquares?.some(
    (square: Position) => square.row === row && square.col === col
  ) || false
}

const isValidMove = (row: number, col: number) => {
  return currentStepData.value?.validMoves?.some(
    (move: Position) => move.row === row && move.col === col
  ) || false
}

const handleCellClick = (row: number, col: number) => {
  if (!selectedPiece.value) {
    if (getPiece(row, col)) {
      selectedPiece.value = { row, col }
    }
  } else {
    const isCorrect = checkMove(
      selectedPiece.value.row,
      selectedPiece.value.col,
      row,
      col
    )

    lastMoveWasCorrect.value = isCorrect
    lastMoveWasWrong.value = !isCorrect
    selectedPiece.value = null

    if (isCorrect) {
      setTimeout(() => {
        lastMoveWasCorrect.value = false
      }, 1500)
    } else {
      setTimeout(() => {
        lastMoveWasWrong.value = false
      }, 1500)
    }
  }
}

const handleNextStep = () => {
  if (nextStep()) {
    lastMoveWasCorrect.value = false
    lastMoveWasWrong.value = false
  }
}

const handleComplete = () => {
  emit('complete')
  emit('close')
}

// 初始化教程
onMounted(() => {
  startTutorial('basic-moves')
})
</script>

<style scoped>
.tutorial-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  min-width: 800px;
}

.tutorial-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.tutorial-board {
  display: grid;
  grid-template-columns: auto 300px;
  gap: 20px;
}

.chess-board {
  width: 400px;
  height: 400px;
  border: 2px solid #333;
}

.board-row {
  display: flex;
  height: 12.5%;
}

.board-cell {
  width: 12.5%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.white-cell {
  background-color: #fff;
}

.black-cell {
  background-color: #b58863;
}

.highlighted {
  background-color: rgba(255, 255, 0, 0.3);
}

.valid-move {
  background-color: rgba(0, 255, 0, 0.2);
}

.tutorial-info {
  padding: 20px;
  background: #f5f5f5;
  border-radius: 4px;
}

.feedback {
  margin-top: 20px;
  padding: 10px;
  border-radius: 4px;
  text-align: center;
  font-weight: bold;
}

.feedback.correct {
  background-color: #4CAF50;
  color: white;
}

.feedback.wrong {
  background-color: #f44336;
  color: white;
}

.tutorial-controls {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}
</style> 